import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Carousel, WingBlank, WhiteSpace } from 'antd-mobile'
import { observer, inject } from 'mobx-react'
import { Link } from 'react-router-dom'
import { toJS } from 'mobx'
import { ProductItem, IconFont } from 'components'
import placeholderMd from 'assets/common/placeholder-md.png'
import './msite.scss'

@inject('pictureStore', 'productStore', 'msiteStore')
@observer
class IndexPage extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    pictureStore: PropTypes.object.isRequired,
    productStore: PropTypes.object.isRequired,
    msiteStore: PropTypes.object.isRequired,
  }

  componentDidMount() {
    this.props.pictureStore.getIndexBaner()
    this.props.msiteStore.getIndexNav()
    this.props.msiteStore.getScrollAd()
    this.props.productStore.getHotProductList()
  }

  bannerClick = (url) => {
    let href = url
    if (!href.startsWith('http')) {
      href = `http://${href}`
    }

    stat({
      category: '首页banner',
      action: '点击首页banner',
      label: href,
      callback() {
        window.location.href = href
      },
    })
  };

  itemClick = (item) => {
    this.props.history.push({
      pathname: '/detail',
      search: `?id=${item.id}`,
    })

    stat({
      category: '热门贷款产品',
      action: '查看产品详情',
      label: item.name,
    })
  };

  moreClickHandler = () => {
    stat({
      category: '热门贷款产品',
      action: '查看更多',
    })
  };

  adItemClick = (url, e) => {
    e.preventDefault()
    stat({
      category: '首页滚动广告',
      action: '点击公司名称',
      label: url,
      callback() {
        window.location.href = url
      },
    })
  };

  render() {
    const { pictureStore, msiteStore, productStore } = this.props
    const indexBannerList = toJS(pictureStore.indexBannerList)
    const indexNavList = toJS(msiteStore.indexNavList)
    const scrollAdList = toJS(msiteStore.scrollAdList)
    const hotProductList = toJS(productStore.hotProductList)

    return (
      <div className="main-content">
        {indexBannerList.length ?
          <Carousel
            styleName="carousel"
            autoplay
            infinite
            dots={false}
          >
            {indexBannerList.map(item => (
              <img
                key={item.id}
                styleName="banner"
                src={item.pic}
                alt="banner"
                role="presentation"
                onClick={evt => this.bannerClick(item.link, evt)}
              />
            ))}
          </Carousel>
          : <img
            src={placeholderMd}
            className="img-block"
            styleName="placeholder-md"
            alt="有米贷"
          />
        }
        <WhiteSpace />
        <WingBlank>
          <Carousel
            styleName="vertical-carousel"
            dots={false}
            dragging={false}
            swiping={false}
            speed={1000}
            autoplay
            infinite
            vertical
          >
            {scrollAdList.map(item => (
              <div key={item.id} styleName="ad-item">
                <IconFont type="laba1" />
                <span>
                  {item.date} 用户{item.mobile}
                  在<a href="" onClick={(e) => { this.adItemClick(item.url, e) }}>{item.name}</a>
                  成功借款{item.money}元
                </span>
              </div>
            ))}
          </Carousel>
        </WingBlank>
        <WhiteSpace />
        <div styleName="index-nav">
          {indexNavList.map(nav => (
            <a key={nav.id} href={nav.link}>
              <img src={nav.pic} alt="" />
              <p>{nav.name}</p>
            </a>
          ))}
        </div>
        <div styleName="product-wrapper">
          <div styleName="product-header">
            热门贷款产品
            <Link to="/products" styleName="more-product" onClick={this.moreClickHandler}>
              <span>更多产品</span>
              <IconFont type="youjiantou" />
            </Link>
          </div>
          {hotProductList.map(item => (
            <ProductItem
              key={item.id}
              data={item}
              onClick={() => this.itemClick(item)}
            />
          ))}
        </div>
      </div>
    )
  }
}

export default IndexPage
